<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/2/24
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试ajax</title>
</head>
<body>
    人员编号：<input type="text"  name="person_id" id="person_id"><br>
    人员姓名：<input type="text" name="person_name" id="person_name"><br>
    <input type="button" value="测试ajax" onclick="testAjax()">
    <input type="button" value="点我" onclick="clickMe()">
</body>
<script>
    function clickMe() {
        alert("hahahah");
    }
    //创建XMLHttpRequest
    function createXHR(){
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    function testAjax()
    {
        //1创建XMLHttpRequest
       var  xhr=createXHR();
       //2设置请求方式
        xhr.open("GET","ajax?person_id="+document.getElementById("person_id").value,false);
        //3设置回调函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var obj = document.getElementById("person_name");
                    obj.value = xhr.responseText;
                } else {
                    alert("AJAX服务器返回错误！");
                }
            }
        }

        //4,发送请求
        xhr.send(null);
    }
</script>
</html>
